<template>
  <div>
    <img src="@/images/image_bg.png" alt="" class="loginimg" />
    <img src="@/images/image_title.png" alt="" class="logintitle" />
    <!-- 进度条外边框 -->
    <div class="loginbox">
      <!-- 进度条 -->
      <div class="loginitem" :style="{ width: progressWidth + '%' }"></div>
      <!-- 进度条提示框 -->
      <div
        class="logintipsbox"
        :style="{ left: `calc(${progressWidth}% - 20px)` }"
      >
        <img src="@/images/image_qipao_bg.png" alt="" />
        <span>{{ progressWidth + 4 }}%</span>
      </div>
    </div>
    <!-- 进度banner -->
    <div class="loginbanner">加载中···</div>
  </div>
</template>

<script>
export default {
  name: 'WorkspaceJsonLoaDing',

  data() {
    return {
      progressWidth: 0
    }
  },

  mounted() {
    this.startProgress()
  },

  methods: {
    startProgress() {
      let progressInterval = setInterval(() => {
        if (this.progressWidth < 95) {
          this.progressWidth += 6
        } else {
          clearInterval(progressInterval) // 动画结束
          this.$router.push({
            name: 'index'
          })
        }
      }, 100) // 每100ms更新一次
    }
  }
}
</script>

<style scoped>
.loginimg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.logintitle {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.logintitle img {
  width: 1454px;
  height: 178px;
}
.loginbox {
  width: 500px;
  height: 36px;
  border-radius: 40px 40px 40px 40px;
  border: 1px solid #94edff;
  position: absolute;
  bottom: 362px;
  left: 50%;
  transform: translate(-50%, 0);
}
.loginitem {
  width: 270px;
  height: 24px;
  background: linear-gradient(90deg, #365fe6 0%, #40c6ff 100%);
  border-radius: 40px 40px 40px 40px;
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translate(0, -50%);
}
.logintipsbox {
  position: absolute;
  top: -40px;
}
.logintipsbox img {
  width: 52px;
  height: 37px;
}
.logintipsbox span {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #ffffff;
  display: block;
}
.loginbanner {
  position: absolute;
  bottom: 300px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
</style>
